import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import axios from 'axios'
import Childrens from '../components/Childrens'

@inject('testStore')
@observer
class Home extends Component {
    constructor(props){
        super(props)
        this.state = {
            count: this.props.testStore.count,
            listData: []
        }
    }
    UNSAFE_componentWillMount() {
        console.log('我是父组件-componentWillMount')
    }
    componentDidMount() {
        console.log('我是父组件-componentDidMount')
        // 解决跨域问题
        axios.get('/api/getList').then(res=>{
            console.log('请求数据：', res.data.data)
            this.setState((state) => {
                return {
                    listData: state.listData.concat(res.data.data)
                }
            }, () => {
            })
            // console.log(this.state.listData)
        })
    }
    // componentDidUpdate() {
    //     console.log('我是父组件-componentDidUpdate')
    // }
    
    addCount = (value) => {
        this.props.testStore.changeCount(value)
    }

    render() {
        console.log('父组件-render')
        let { count } = this.props.testStore
        let { listData } = this.state
        return (
            <div>
                <h1>我是首页</h1>
                <p>count值：{count}</p>
                <button onClick={() => this.addCount(3)}>点击+3</button>
                <Childrens listData={ listData }/>
            </div>
        )
    }
}

export default Home